List name

Description

Specify the list to which you want to add the form view. This is perhaps the simplest option when creating a form view for the first time.

For an easy example of how to create a simple form view using a read only list watch this video or read the guides below.

Creating a Form View from a Read Only List.

  1. In the UX Builder, open the UX Controls page. Go to the Data Controls menu and select [List] to add a list control to the component.

    images/formlist.png
  2. In the control properties list, go to the List Properties section and click the button next to the List properties property.

    images/formlist2.png
  3. The List Builder will open. In the Data Source Type menu select the 'Static' option.

    images/formlist3.png
  4. Click the button next to the 'Static data' property.

    images/formlist4.png
  5. In the Static Choices dialog click the Sample data button.

    images/formlist5.png
  6. The Sample Data dialog will open. Click on the 'Name and addresses' option from the menu using CR-LF format. Click OK and OK again.

    images/formlist6.png
  7. Click on the 'List Layout' pane. Use the blue arrow to move the four fields from the sample data from the Available Fields list to the Columns in List. Click OK to close the List Builder.

    images/formlist7.png
  8. On the UX Controls page again, open the Other Controls menu and click on [Form View] to add a form view control to the component.

    images/formlist8.png
  9. Click the 'Form properties' property to open Form View builder.

    images/formlist9.png
  10. Open the Data Source pane and set the Datasource type property to 'List'.

    images/formlist10.png
  11. Click the button next to the list name property and in the 'Select List' dialog highlight the list control and click OK.

    images/formlist11.png
  12. Go to the Form Layout pane and click the 'Add item' button.

    images/formlist12.png
  13. In the 'Category' menu select the Data Controls option. Highlight all of the Field names on the right using Shift + click, then in the 'Control' menu select [Label]. Click OK and OK again to close the Form View Builder.

    images/formlist13.png
  14. Go to 'Live Preview' and run the component. Click on any row of data in the list control and you should see the Form View control appear.

    images/finalform.png
    A highlighted form view

Creating a Simple Updateable Form View

This guide continues from the example above.

  1. Having created the read-only form view above, go to the UX Controls page. Open the Containers menu and select [Container]

    images/formlist14.png
  2. From the Container Type list that opens select 'EditorSet'. Insert the Editor set after the Form View control.

    images/formlist15.png
  3. In the UX Controls page go to the 'Defined Controls' menu. Select the 'Editor-Textbox' option and place the Editor Textbox controls inside the Editor Set.

    images/formlist16.png
    The blue up and down arrows in the Controls page toolbar can be used to order controls on the page.
  4. Highlight the Form View control and click on Form properties to open the Form View builder.

    images/formlist17.png
  5. Go to the 'Fields' pane. Highlight the first field. In the Editing section of the Fields pane find the Editor set property. Click the button next to it to open the Select Editor dialog.

    images/formlist18.png
  6. Highlight 'EDITORSET_1' and 'EDITOR_1' and click the 'Assign selection to multiple fields' button.

    images/formlist19.png
  7. Use Shift + click to highlight all of the fields. Then click OK

    images/formlist20.png
  8. In the Form View Builder open the 'Form Layout' pane. Click the Add item button.

    images/formlist21.png
  9. In the Category menu select 'Pre-defined Controls' and in the 'Control' section select the [Save Form Edits/Cancel Edits Button] control. Click OK.

    images/formlist22.png
  10. Run the Component in Live Preview. When you highlight a row in the list control the Form View should appear. Then when you click on a field in the Form View control and Edit box should appear underneath it. Edit a field and click the 'Save' button underneath the editor to change the information in the FormView. Click the Save Form Edits button to save changes in the form view to the list control.

    • images/formlist23.png
      Updating the Form View
    • images/formlist24.png
      Saving an edit to a list control